<template>
  <div class="echart-demo">
    <div class="chart-wrapper">
      <div ref="chartDom" class="chart" style="width: 100%; height: 400px;"></div>
    </div>

    <div class="chart-selector">
      <el-radio-group v-model="chartType" size="large" @change="updateChart">
        <el-radio-button label="bar">柱状图</el-radio-button>
        <el-radio-button label="line">折线图</el-radio-button>
        <el-radio-button label="pie">饼图</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartDom = ref(null)
const chartType = ref('bar')
let myChart = null

onMounted(() => {
  myChart = echarts.init(chartDom.value)
  updateChart()
  window.addEventListener('resize', resizeChart)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  if (myChart) {
    myChart.dispose()
  }
})

const resizeChart = () => {
  if (myChart) {
    myChart.resize()
  }
}

const updateChart = () => {
  if (!myChart) return

  const option = getChartOption(chartType.value)
  myChart.setOption(option)
}

function getChartOption(type) {
  const categories = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  const data = [120, 200, 150, 80, 70, 110]

  if (type === 'bar') {
    return {
      title: {
        text: '产品销量柱状图',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: categories
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销量',
          type: 'bar',
          data: data,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          }
        }
      ]
    }
  } else if (type === 'line') {
    return {
      title: {
        text: '产品销量趋势图',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: categories
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销量',
          type: 'line',
          data: data,
          smooth: true,
          lineStyle: {
            width: 4,
            color: '#5470c6'
          },
          itemStyle: {
            color: '#5470c6'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
              { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
            ])
          }
        }
      ]
    }
  } else if (type === 'pie') {
    return {
      title: {
        text: '产品销量占比',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center'
      },
      series: [
        {
          name: '销量',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter: '{b}: {d}%'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: categories.map((name, index) => ({
            value: data[index],
            name
          }))
        }
      ]
    }
  }
}
</script>

<style scoped>
.echart-demo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.chart-wrapper {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.chart-selector {
  display: flex;
  justify-content: center;
}
</style>